﻿<!doctype html>
<html lang="en">

<head>

    <!--====== Required meta tags ======-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--====== Title ======-->
    <title>HaFood</title>

    <!--====== Bootstrap css ======-->
    <link rel="stylesheet" href="/static/index/css/bootstrap.min.css">

    <!--====== Pe Icon 7 Stroke css ======-->
    <link rel="stylesheet" href="/static/index/css/Pe-icon-7-stroke.css">

    <!--====== Ion Icons css ======-->
    <link rel="stylesheet" href="/static/index/css/ionicons.min.css">

    <!--====== Magnific Popup css ======-->
    <link rel="stylesheet" href="/static/index/css/magnific-popup.css">

    <!--====== Slick css ======-->
    <link rel="stylesheet" href="/static/index/css/slick.css">

    <!--====== Animate css ======-->
    <link rel="stylesheet" href="/static/index/css/animate.min.css">

    <!--====== Nice Select css ======-->
    <link rel="stylesheet" href="/static/index/css/nice-select.css">

    <!--====== Default css ======-->
    <link rel="stylesheet" href="/static/index/css/default.css">

    <!--====== Style css ======-->
    <link rel="stylesheet" href="/static/index/css/style.css">

    <link rel="stylesheet" href="/static/index/css/com_car.css">


    <!--====== jquery js ======-->

    <script src="/static/index/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="/static/index/js/vendor/jquery.form.min.js"></script>
    <script src="/static/index/js/vendor/modernizr-3.6.0.min.js"></script>


</head>

<body>

<!--====== PRELOADER  PART START ======-->

<div id="preloader">
    <div id="loader">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
</div>

<!--====== PRELOADER  PART ENDS ======-->

<!--====== SEARCH PART START ======-->

<div class="search-box">
    <div class="search-header">
        <div class="container mt-60">
            <div class="row">
                <div class="col-6">
                    <h5 class="search-title">搜索</h5> <!-- search title -->
                </div>
                <div class="col-6">
                    <div class="search-close text-right">
                        <button class="search-close-btn">关闭 <span></span><span></span></button>
                    </div> <!-- search close -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- search header -->
    <div class="search-body">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="search-form">
                        <form action="#">
                            <input type="text" placeholder="Search for Products">
                            <button><i class="flaticon-search"></i></button>
                        </form>
                    </div>
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- search body -->
</div>

<!--====== SEARCH PART ENDS ======-->

<!--====== SHOPPING CART PART START ======-->

<div class="shopping-cart-wrapper">
    <div class="shopping-cart-canvas">
        <div class="shopping_cart">
            <div class="shopping_cart-top-bar d-flex justify-content-between">
                <h6>购物车</h6>
                <button class="shopping-cart-close">
                    <i class="ion ion-md-add"></i>
                </button>
            </div><!-- shopping cart top bar -->
            <div class="shopping_cart-list-items mt-30">
                <ul>
                    {% if user.car %}
                        {% for foo in user.car %}
                            <li>
                                <div class="single-shopping-cart media">
{#                                    <div class="cart-image">#}
{#                                        <img src="/static/index/images/cart-1.jpg" alt="Cart">#}
{#                                    </div>#}
                                    <div class="cart-content media-body pl-15">
                                        <h6><a href="#">{{ foo.com_name }}</a></h6>
                                        <span class="quality">QTY: 01</span>
                                        <span class="price">${{ foo.com_price }}</span>
                                        <a class="remove" href="#"><i class="fal fa-times"></i></a>
                                    </div>
                                </div> <!-- single shopping cart -->
                            </li>
                        {% endfor %}
                    {% endif %}
                </ul>
            </div> <!-- shopping_cart list items -->
            <div class="shopping_cart-btn">
                <div class="total pt-35 d-flex justify-content-between">
                    <h5>Subtotal:</h5>
                    {% if user.car %}
                        <p>${{ user.car | total_price("") }}</p>
                    {% endif %}
                </div>
                <div class="cart-btn pt-25">
                    <a class="main-btn" href="com_car.html">查看购物车</a>
                    <a class="main-btn main-btn-2" href="checkout.html">立即结算</a>
                </div>
            </div>
        </div> <!-- shopping_cart -->
    </div>
    <div class="overlay"></div>
</div>

<!--====== SHOPPING CART PART ENDS ======-->


<!--====== HEADER  PART START ======-->

<header class="header-area">
    <div class="navigation navigation-2 navigation-page fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-expand-lg">
                        <a class="navbar-brand" href="index.html">
                            <img src="/static/index/images/logo.png" alt="Logo">
                        </a> <!-- Logo -->

                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button> <!-- navbar-toggler -->

                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item"><a href="index.html">主页</a></li>
                                <li class="nav-item"><a href="product-grid.html">全部商品</a></li>
                                <li class="nav-item"><a class="page-scroll" href="#">最新活动</a></li>
                                <li class="nav-item"><a class="page-scroll" href="#">会员俱乐部</a></li>
                                {% if user %}
                                 <li class="nav-item"><a class="page-scroll" href="order.html">{{ user.nick_name }}的订单</a></li>
                                {% endif %}
                            </ul>
                        </div> <!-- navbar collapse -->
                        <div class="navbar-icon d-none d-sm-block">
                            <ul>
                                <li><a class="search-open" href="#"><i class="pe-7s-search"></i></a></li>
                                <li><a class="shopping-cart-open" href="#"><i class="pe-7s-cart"></i></a></li>
                                <li><a class="" href="user.html" style="width: auto ; height: auto"><i
                                        class="pe-7s-user"></i>欢迎您,{{ user.nick_name }}<i class=""></i></a></li>
                            </ul>
                        </div>
                    </nav> <!-- navbar -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- navigation -->
</header>

<!--====== HEADER  PART ENDS ======-->

<!--====== PAGE TITLE  PART START ======-->

<section class="page-title-area d-flex align-items-center bg_cover"
         style="background-image: url(/static/index/images/page-title-bg.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-title-item text-center">
                    <h3 class="title">购物车</h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                            <li class="breadcrumb-item active" aria-current="page">购物车</li>
                        </ol>
                    </nav>
                </div> <!-- page title item -->
            </div>
        </div> <!-- row -->
    </div> <!-- row -->
    <div class="page-title-shape">
        <img src="/static/index/images/banner-shape.png" alt="shape">
    </div> <!-- page title shape -->
</section>

<!--====== PAGE TITLE  PART ENDS ======-->

<!--====== PRODUCT  PART START ======-->

<section class="product-area product-area-2">
    <div class="container">
        <div class="row align-items-center pt-65 pb-20">

            <div class="cart">
                <div class="cart-title">我的购物车</div>
                <table class="cart-table">
                    <tr>
                        <th width="60"></th>
                        <th>商品</th>
                        <th width="120">单价</th>
                        <th width="100">质量(kg)</th>
                        <th width="120">小计</th>
                        <th width="80">操作</th>
                    </tr>
                    {% for foo in user.car %}
                        <tr class="cart-item">
                            <td></td>
                            <td class="cart-txt-left"><span class="cart-name">{{ foo.com_name }}</span></td>
                            <td><span class="cart-price">${{ foo.com_price }}</span></td>
                            <td>
                                <button type="button" class="sub" com_id="{{ foo.id }}">-</button>
                                <span class="cart-num">{{ foo.id | get_count_and_prices }}</span>
                                <button type="button" class="add" com_id="{{ foo.id }}">+</button>
                            </td>
                            <td><span class="cart-subtotal">0</span>
                            </td>
                            <td><span class="cart-del" rm_id="{{ foo.id }}">删除</span></td>
                        </tr>
                    {% endfor %}


                    <tr class="cart-bottom">
                        <td colspan="6">
                            {#                            <span class="cart-bottom-span">已选择<span class="cart-total-num">{{ user.car | count }}</span>件商品</span>#}
                            <span class="cart-bottom-span">总计：<span
                                    class="cart-total-price">0</span></span>
                            <a href="checkout.html"><span class="cart-bottom-btn" id="commit_order">提交订单</span></a>

                        </td>
                    </tr>
                </table>
            </div>
        </div> <!-- row -->
    </div> <!-- container -->
</section>

<!--====== PRODUCT  PART ENDS ======-->

<!--====== BLOG GRID PART START ======-->

<!--====== BLOG GRID PART ENDS ======-->

<!--====== FOOTER PART START ======-->

<section class="footer-area gray-bg pt-60 pb-85">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-5">
                <div class="footer-item-1 mt-30">
                    <a href="index.html"><img src="/static/index/images/logo-2.png" alt="logo"></a>
                    <span>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank"
                                                                                    href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
                    <ul>
                        <li><a href="#">Quality policy</a></li>
                        <li><a href="#">Customer Policy </a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                    <div class="footer-info">
                        <ul>
                            <li><i class="ion ion-md-pin"></i> 123 New Design Str, ABC Building, <br> Melbourne,
                                Australia
                            </li>
                            <li><i class="ion ion-ios-mail"></i>example@gmail.com</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 offset-lg-2 col-md-2 col-sm-4">
                <div class="footer-social mt-30">
                    <h5 class="title">Social Links</h5>
                    <ul>
                        <li><a href="https://www.facebook.com/info.tanver">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="skype:live:taherul.islam_1">Skype</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-5 col-sm-8">
                <div class="footer-item-2 mt-30">
                    <h5 class="title">Newsletters</h5>
                    <form action="#">
                        <div class="input-box mt-25">
                            <input type="email" placeholder="Your email">
                        </div>
                        <div class="input-box mt-25">
                            <button class="main-btn">Submit <i class="ion ion-ios-send"></i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!--====== FOOTER PART ENDS ======-->

<!--====== BACK TO TOP ======-->
<div class="back-to-top">
    <a href="">
        <i class="ion ion-md-arrow-up"></i>
    </a>
</div>
<!--====== BACK TO TOP ======-->


<script src="/static/index/js/com_car.js"></script>
<!--====== Bootstrap js ======-->
<script src="/static/index/js/bootstrap.min.js"></script>
<script src="/static/index/js/popper.min.js"></script>

<!--====== Slick js ======-->
<script src="/static/index/js/slick.min.js"></script>

<!--====== Isotope js ======-->
<script src="/static/index/js/isotope.pkgd.min.js"></script>

<!--====== Images Loaded js ======-->
<script src="/static/index/js/imagesloaded.pkgd.min.js"></script>

<!--====== Magnific Popup js ======-->
<script src="/static/index/js/jquery.magnific-popup.min.js"></script>

<!--====== Nice Select js ======-->
<script src="/static/index/js/jquery.nice-select.min.js"></script>

<!--====== Ajax Contact js ======-->
<script src="/static/index/js/ajax-contact.js"></script>

<!--====== Main js ======-->
<script src="/static/index/js/main.js"></script>


</body>

</html>

